import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Github, Globe, Package, Zap, Code, Sparkles } from 'lucide-react'
import reactLogo from '@/assets/react.svg'
import viteLogo from '/vite.svg'

function App() {
  const [count, setCount] = useState(0)

  const features = [
    {
      icon: <Zap className="h-5 w-5" />,
      title: 'Vite',
      description: 'Lightning fast build tool with HMR',
    },
    {
      icon: <Code className="h-5 w-5" />,
      title: 'TypeScript',
      description: 'Full type safety and IntelliSense',
    },
    {
      icon: <Package className="h-5 w-5" />,
      title: 'TanStack',
      description: 'Query, Router, and Table libraries',
    },
    {
      icon: <Sparkles className="h-5 w-5" />,
      title: 'Radix UI',
      description: 'Accessible and customizable components',
    },
  ]

  const stack = [
    'React 19',
    'TypeScript 5.7',
    'Vite 6',
    'Tailwind CSS',
    'TanStack Query',
    'TanStack Router',
    'Radix UI',
    'Zustand',
    'React Hook Form',
    'Zod',
    'Vitest',
    'ESLint',
    'Prettier',
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
      <div className="container mx-auto px-4 py-16">
        {/* Header */}
        <div className="text-center mb-16">
          <div className="flex justify-center items-center gap-4 mb-6">
            <img src={viteLogo} className="h-12 w-12" alt="Vite logo" />
            <span className="text-3xl font-bold">+</span>
            <img src={reactLogo} className="h-12 w-12 animate-spin" alt="React logo" />
          </div>
          <h1 className="text-4xl md:text-6xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-4">
            React TypeScript Template
          </h1>
          <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
            A modern, production-ready template for building React applications with TypeScript in 2025
          </p>
          <div className="flex justify-center gap-4">
            <Button size="lg" className="gap-2">
              <Github className="h-4 w-4" />
              View on GitHub
            </Button>
            <Button variant="outline" size="lg" className="gap-2">
              <Globe className="h-4 w-4" />
              Live Demo
            </Button>
          </div>
        </div>

        {/* Interactive Counter */}
        <Card className="max-w-md mx-auto mb-16">
          <CardHeader className="text-center">
            <CardTitle>Interactive Counter</CardTitle>
            <CardDescription>Test the development experience</CardDescription>
          </CardHeader>
          <CardContent className="text-center">
            <Button
              onClick={() => setCount(count => count + 1)}
              size="lg"
              className="w-full mb-4"
            >
              Count is {count}
            </Button>
            <p className="text-sm text-muted-foreground">
              Edit <code className="bg-muted px-1 py-0.5 rounded">src/App.tsx</code> and save to test HMR
            </p>
          </CardContent>
        </Card>

        {/* Features and Stack */}
        <Tabs defaultValue="features" className="max-w-4xl mx-auto">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="features">Key Features</TabsTrigger>
            <TabsTrigger value="stack">Tech Stack</TabsTrigger>
          </TabsList>
          
          <TabsContent value="features" className="mt-8">
            <div className="grid gap-6 md:grid-cols-2">
              {features.map((feature, index) => (
                <Card key={index} className="transition-all hover:shadow-lg">
                  <CardHeader>
                    <div className="flex items-center gap-3">
                      <div className="p-2 bg-primary/10 rounded-lg text-primary">
                        {feature.icon}
                      </div>
                      <CardTitle className="text-lg">{feature.title}</CardTitle>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <CardDescription>{feature.description}</CardDescription>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>
          
          <TabsContent value="stack" className="mt-8">
            <Card>
              <CardHeader>
                <CardTitle>Modern Tech Stack</CardTitle>
                <CardDescription>
                  All dependencies updated to their latest stable versions
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex flex-wrap gap-2">
                  {stack.map((tech, index) => (
                    <Badge key={index} variant="secondary" className="text-sm">
                      {tech}
                    </Badge>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}

export default App 